<template>
  <div class="app-container">
    <!-- <switch-roles @change="handleRolesChange" /> -->
	<div class="btns">
		<div class="headItem">
			<el-button type="primary">确认修改</el-button>
		</div>
		<div class="headItem">
			<el-button type="primary">保存</el-button>
		</div>
	</div>
	<div class="con">
		<div class="left">
			<div class="lefttop">
				<div class="lt-box">
					<div class="lt-box-item1">
						<div class="lt-box-item1-left">客服头像</div>
						<div class="lt-box-item1-right">
							<div class="lt-box-item1-right-con">
								<img src="" alt="" />
							</div>
						</div>
					</div>
					<div class="lt-box-item1">
						<div class="lt-box-item1-left">机器人头像</div>
						<div class="lt-box-item1-right">
							<div class="lt-box-item1-right-con">
								<img src="" alt="" />
							</div>
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">房间群名称</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入房间群名称" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">机器人名称</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入机器人名称" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">客服昵称</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入客服昵称" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">房间微信</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入房间微信" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">QQ微信</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入QQ微信" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">系统消息中显示账号金额最低值</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="4" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">系统消息中显示账号名称长度</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="4" class="remarkInput" />
						</div>
					</div>
				</div>
				<div class="lt-box">
					<div class="lt-box-item3">
						<div class="lt-box-item3-left">微信收款码</div>
						<div class="lt-box-item3-right">
							<div class="lt-box-item3-right-con">+</div>
						</div>
					</div>
					<div class="lt-box-item3">
						<div class="lt-box-item3-left">支付宝收款码</div>
						<div class="lt-box-item3-right">
							<div class="lt-box-item3-right-con">+</div>
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">银行卡姓名</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入银行卡姓名" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">银行卡类型</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入银行卡类型" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">银行卡开户地址</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入银行卡开户地址" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">虚拟货币USDT</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入虚拟货币USDT" class="remarkInput" />
						</div>
					</div>
					<div class="lt-box-item2">
						<div class="lt-box-item2-left">房间公告</div>
						<div class="lt-box-item2-right">
							<el-input placeholder="请输入房间公告" class="remarkInput" />
						</div>
					</div>
				</div>
			</div>
			<div class="leftbottom">
				<div class="lb-title">禁言防封设置</div>
				<div class="lb-item">
					<div class="lb-item-left">
						<el-checkbox
						  label="是否开启禁言"
						/>
					</div>
					<div class="lb-item-right">开启后玩家只能使用快捷下注</div>
				</div>
				<div class="lb-item">
					<div class="lb-item-left">
						<el-checkbox
						  label="是否强制在浏览器打开"
						/>
					</div>
					<div class="lb-item-right">开启后将强制玩家跳转到浏览器进行游戏</div>
				</div>
				<div class="lb-item">
					<div class="lb-item-left">
						<el-checkbox
						  label="是否必须绑定账号"
						/>
					</div>
					<div class="lb-item-right">开启后将强制让玩家设置账号密码、微信</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="r-title">上下分</div>
			<div class="r-item">
				<el-checkbox
				  label="玩家必须在充值/提现页面上下分"
				/>
			</div>
			<div class="r-item">
				<el-checkbox
				  label="是否允许手机号注册"
				/>
			</div>
			<div class="r-item">
				<el-checkbox
				  label="是否禁止注册"
				/>
			</div>
			<div class="r-item">
				<el-checkbox
				  label="是否发送核对信息"
				/>
			</div>
			<div class="r-item">
				<el-checkbox
				  label="是否发送核对信息"
				/>
			</div>
			<div class="r-item">
				<el-checkbox
				  label="是否发送账单消息"
				/>
			</div>
			<div class="r-item">
				<el-checkbox
				  label="是否发送上下分成功at消息"
				/>
			</div>
			<div class="r-item1">
				<el-radio-group style="padding: 20px;padding-bottom: 0;">
					<el-radio>
						当日下注期数低于多少期，不能提现
					</el-radio>
					<el-radio>
						上下分之后死于多少期，不能提现
					</el-radio>
				</el-radio-group>
				<div class="r-item1-item">
					当日下注期数低于
					<el-input placeholder="4" class="remarkInput" style="width:50px;margin:0 5px;" />
					期，不能提现
				</div>
				<div class="r-item1-item">
					当日内下分数限制
					<el-input placeholder="4" class="remarkInput" style="width:50px;margin:0 5px;" />
					次
				</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
import SwitchRoles from './components/SwitchRoles'

export default {
  name: 'PagePermission',
  components: { SwitchRoles },
  methods: {
    handleRolesChange() {
      this.$router.push({ path: '/permission/index?' + +new Date() })
    }
  }
}
</script>
<style scoped>
	*{
		box-sizing: border-box;
	}
	.btns{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.headItem {
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: 500;
	}
	/deep/.headItem .el-button--medium {
		padding: 5px 6px;
		font-size: 12px;
		margin-left: 5px;
		background-color: #c345cc;
		border-radius: 4px;
		border-color: #c345cc;
	}
	
	.headItemTow p {
		margin-left: 20px;
	}
	
	/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #c345cc;
		border-color: #c345cc;
	}
	/deep/.el-radio__input.is-checked .el-radio__inner{
		background-color: #c345cc;
		border-color: #c345cc;
	}
	/deep/.el-radio__input.is-checked+.el-radio__label{
		color:#606266;
	}
	/deep/ .el-radio{
		margin-bottom:20px;
	}
	/deep/.headItem .el-input--medium .el-input__inner {
		height: 25px;
		line-height: 25px;
		width: 170px;
		font-size: 12px;
		padding-left: 10px;
	}
	.con{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}
	.left{
		width: 76.5%;
	}
	.right{
		width: 22.5%;
		border: 1px solid #EBEEF5;
	}
	.lefttop{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.lt-box{
		width: 49.5%;
		border: 1px solid #EBEEF5;
	}
	.lt-box-item1{
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #EBEEF5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.lt-box-item2{
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #EBEEF5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.lt-box-item2:last-child{
		border-bottom: 0;
	}
	.lt-box-item3{
		width: 100%;
		height: 75px;
		border-bottom: 1px solid #EBEEF5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.lt-box-item1-left{
		flex: 1;
		height: 40px;
		line-height: 40px;
		border-right: 1px solid #EBEEF5;
		font-size: 14px;
		color: #606266;
		padding-left: 14px;
	}
	.lt-box-item2-left{
		flex: 1;
		height: 35px;
		line-height: 35px;
		border-right: 1px solid #EBEEF5;
		font-size: 14px;
		color: #606266;
		padding-left: 14px;
	}
	.lt-box-item3-left{
		flex: 1;
		height: 75px;
		line-height: 75px;
		border-right: 1px solid #EBEEF5;
		font-size: 14px;
		color: #606266;
		padding-left: 14px;
	}
	.lt-box-item1-right{
		flex: 1;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lt-box-item2-right{
		flex: 1;
		height: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lt-box-item3-right{
		flex: 1;
		height: 75px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.lt-box-item1-right-con{
		width: 90%;
		height: 34px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border: 1px solid #EBEEF5;
		border-radius: 5px;
		padding-left: 10px;
	}
	.lt-box-item1-right-con img{
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}
	.lt-box-item3-right-con{
		width: 64px;
		height: 64px;
		border: 1px solid #EBEEF5;
		border-radius: 5px;
		font-size: 20px;
		color: #999;
		text-align: center;
		line-height: 64px;
		margin-left: 12px;
		cursor: pointer;
	}
	.remarkInput {
		height: 30px;
		line-height: 30px;
		width: 90%;
		font-size: 13px;
	}
	
	/deep/.remarkInput .el-input__inner {
		height: 30px;
		text-align: left;
		line-height: 30px;
		border-color: #EBEEF5;
	}
	.leftbottom{
		width: 100%;
		border: 1px solid #EBEEF5;
		margin-top: 10px;
		font-size: 14px;
	}
	.lb-title{
		width: 100%;
		height: 26px;
		line-height: 26px;
		padding-left: 12px;
		border-bottom: 1px solid #EBEEF5;
		color: #474747;
		background-color: #eaeaea;
	}
	.lb-item{
		width: 100%;
		height: 36px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left:12px;
		border-bottom: 1px solid #EBEEF5;
	}
	.lb-item:last-child{
		border-bottom: 0;
	}
	/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
		color: #606266;
	}
	.lb-item-left{
		width: 24%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.lb-item-right{
		color: #c345cc;
	}
	.r-title{
		width: 100%;
		height: 26px;
		line-height: 26px;
		padding-left: 12px;
		border-bottom: 1px solid #EBEEF5;
		color: #474747;
		background-color: #eaeaea;
	}
	.r-item{
		width: 100%;
		height: 36px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left:12px;
		border-bottom: 1px solid #EBEEF5;
	}
	.r-item1-item{
		padding-left: 25px;
		font-size:14px;
		color:#606266;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
	}
</style>